<template>
  <div class="abnnormalorder">
    <main-content title="服务单详情" back>
      <section class="table-section">
        <div class="table-title">
          <div class="decorator"></div>
          退货商品
        </div>
        <div class="table-wrapper">
          <el-table :data="goodsTableData" style="width: 100%">
            <el-table-column prop="thumbnailUrl" label="商品图片" width="180">
              <template #default="scope">
                <div>
                  <el-avatar
                    style="margin-top: 8px"
                    shape="square"
                    :size="80"
                    fit="fill"
                    :src="scope.row.thumbnailUrl"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称" />
            <el-table-column prop="payOfMoney" label="价格">
              <template #default="scope">
                <div>
                  <span v-show="scope.row.payOfCurrencyCount">{{
                    `${scope.row.payOfCurrencyCount}（积分），`
                  }}</span>
                  {{ setMoneyConfig(scope.row.payOfMoney) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="goodsNum" label="数量" />
            <!-- <el-table-column prop="date" label="库存" />
          <el-table-column prop="date" label="合计" /> -->
          </el-table>
          <div class="summary">
            合计:
            <span class="highlight"
              ><span v-show="orderData.payOfCurrencyCount">{{
                `${orderData.payOfCurrencyCount}（积分），`
              }}</span>
              {{ setMoneyConfig(orderData.payOfMoney) }}</span
            >
          </div>
        </div>
      </section>

      <section class="table-section">
        <div class="table-wrapper">
          <service-line label="服务单号">{{ orderData.orderNo }}</service-line>
          <service-line label="申请状态">{{
            getAbnormalOrderStatus(orderData.exception?.status)
          }}</service-line>
          <service-line label="订单编号">
            <div class="line-content">
              {{ orderData.orderNo }}
              <el-button
                @click="goOrderDetail(orderData.exception?.orderId)"
                type="primary"
                link
                >查看</el-button
              >
            </div>
          </service-line>
          <service-line label="申请时间">
            {{ formatTime(orderData.createTime) }}
          </service-line>
          <service-line label="用户账号">
            {{ orderData.exception?.userAccount }}
          </service-line>
          <service-line label="联系人">
            {{ orderData.exception?.userName }}
          </service-line>
          <service-line label="联系电话">
            {{ orderData.exception?.userPhone }}
          </service-line>
          <service-line label="退货原因">{{
            orderData.exception?.userReason
          }}</service-line>
          <service-line label="问题描述">{{
            orderData.exception?.userDescription
          }}</service-line>

          <service-line label="凭证照片" class="service-line">
            <div
              class="displf"
              v-for="(item, index) in orderData.exception?.userImages.split(
                ','
              )"
              :key="index"
            >
              <template v-if="item.substr(item.length - 4) == '.mp4'">
                <video
                  controls
                  :autoplay="false"
                  :src="item"
                  style="width: 200px;height=200px"
                ></video>
              </template>

              <el-image
                v-else
                style="width: 200px; height: 200px"
                :src="item"
                fit="contain"
              />
            </div>
          </service-line>
        </div>
      </section>
      <section
        class="table-section"
        v-if="orderData.exception?.status !== 'reject'"
      >
        <div class="table-wrapper">
          <service-line label="订单金额">
            <span v-show="orderData.payOfCurrencyCount">{{
              `${orderData.payOfCurrencyCount}（积分），`
            }}</span>
            {{ setMoneyConfig(orderData.payOfMoney) }}
          </service-line>
          <service-line label="申请退款金额">
            <div class="line-content">
              <!-- <el-input style="width: 100px;"></el-input>单位 -->
              <span v-show="orderData.payOfCurrencyCount">{{
                `${orderData.payOfCurrencyCount}（积分），`
              }}</span>
              {{ setMoneyConfig(orderData.payOfMoney) }}
            </div>
          </service-line>
          <!-- <service-line label="选择收货点">
          <div class="line-content">
            <el-select v-model="serviceForm.address" class="m-2" placeholder="选择收货地点">
              <el-option v-for="item in addressList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </service-line> -->
          <!-- <service-line label="收货人姓名">
          <div class="line-content">
            <el-input></el-input>
          </div>
        </service-line>
        <service-line label="所在区域">
          这里应该有个地址选择器
        </service-line>
        <service-line label="详细地址">
          <div class="line-content">
            <el-input></el-input>
          </div>
        </service-line>
        <service-line label="联系电话">
          <div class="line-content">
            <el-input></el-input>
          </div>
        </service-line> -->
        </div>
      </section>

      <!-- <section class="table-section" v-if="orderData.exception?.status == 'submit'">
      <div class="table-wrapper">
        <service-line label="处理备注">
          <div class="line-content">
            <el-input v-model="storeDescription" type="textarea"></el-input>
          </div>
        </service-line>
      </div>
    </section> -->

      <!-- <section class="table-section">
      <div class="table-wrapper">
        <service-line label="订单金额">
          xxx 单位
        </service-line>

        <service-line label="申请退款金额">
          xxx 单位
        </service-line>

        <service-line label="收货人姓名">
          xxx 单位
        </service-line>

        <service-line label="收货地址">
          xxx 单位
        </service-line>

        <service-line label="联系电话">
          xxx 单位
        </service-line>
      </div>
    </section> -->

      <section
        class="table-section"
        v-if="orderData.exception?.status !== 'submit'"
      >
        <div class="table-wrapper">
          <service-line label="处理人员">
            {{ orderData.exception?.storeName }}
          </service-line>

          <service-line label="处理时间">
            {{ formatTime(orderData.exception?.storeProcessTime) }}
          </service-line>

          <service-line label="处理备注">
            {{ orderData.exception?.storeDescription }}
          </service-line>
        </div>
      </section>

      <section
        class="table-section"
        v-if="
          orderData.exception?.status == 'finish' ||
          orderData.exception?.status == 'wait_store_receive'
        "
      >
        <div class="table-wrapper">
          <service-line label="退回快递公司">
            {{ orderData.exception?.userLogisticsCompany }}
          </service-line>

          <service-line label="退回快递单号">
            {{ orderData.exception?.userLogisticsNum }}
          </service-line>
        </div>
      </section>

      <!-- <section class="table-section">
      <div class="table-wrapper">
        <service-line label="收货人员">
          xxx 单位
        </service-line>

        <service-line label="收货时间">
          xxx 单位
        </service-line>

        <service-line label="收货备注">
          xxx 单位
        </service-line>
      </div>
    </section> -->

      <!-- <section class="table-section">
      <div class="table-wrapper">
        <service-line label="收货备注">
          <div class="line-content">
            <el-input type="textarea"></el-input>
          </div>
        </service-line>
      </div>
    </section> -->

      <!-- <section class="table-section" v-if="orderData.exception?.status == 'submit'">
      <div class="button-wrapper">
        <el-button type="primary" @click="setAbnormalConfirmSub(true, '确认')">确认退货</el-button>
        <el-button type="danger" @click="setAbnormalConfirmSub(false, '拒绝')">拒绝退货</el-button>
      </div>
    </section>

    <section class="table-section" v-if="orderData.exception?.status == 'wait_store_receive'">
      <div class="button-wrapper">
        <el-button @click="getAbnormalApplyOver" type="primary">完成退货</el-button>
      </div>
    </section> -->
    </main-content>
  </div>
</template>

<script setup lang="ts">
import moment from "moment";
import ServiceLine from "./components/ServiceLine.vue";
import { getAbnormalDetail } from "@/api/pointsMall";
import { abnormalOrderStatus } from "@/config/dictionary";
import { setMoneyConfig } from "@/utils";
import { ElMessage } from "element-plus";
const Router = useRouter(),
  Route = useRoute();
const orderData = ref({} as any);
const storeDescription = ref("");
const goodsTableData = computed(() => {
  return [orderData.value];
});

const formatTime = (val: string) => {
  if (val) {
    return moment(val).format("YYYY.MM.DD HH:mm:ss");
  }
  return "--";
};

const addressList = [
  {
    label: "地点123123",
    value: "jkasjdkasd",
  },
];

const serviceForm = reactive({
  address: "",
});
const goOrderDetail = (id: any) => {
  Router.push({
    path: `/activity-order-detail`,
    query: {
      id: id,
    },
  });
};
// 订单详情
const getAbnormalDetailData = async () => {
  let params = {
    id: Route.query.id,
    businessType: "activity",
  };
  let rs: any = await getAbnormalDetail(params);
  if (rs.code === 200) {
    orderData.value = rs.payload;
  }
};

// 完成退货
// const getAbnormalApplyOver = async()=> {
//   let rs:any = await setAbnormalConfirm({id: Route.query.id})
//   if(rs.code === 200) {
//     ElMessage.success('完成退货')
//     getAbnormalDetailData()
//   }
// }

// 审核订单
// const setAbnormalConfirmSub = async(apply: any, text: any)=> {
//   let params = {
//     exceptionOrderId: Route.query.id,
//     apply: apply,
//     storeDescription: storeDescription.value,
//   }
//   let rs:any = await getAbnormalApply(params)
//   if(rs.code === 200) {
//     ElMessage.success(`${text}退货成功`)
//     getAbnormalDetailData()
//   }
// }

// 返回订单状态
const getAbnormalOrderStatus = (_productType: string) => {
  return (
    abnormalOrderStatus.find((item) => item.value == _productType)?.label ??
    _productType
  );
};

onBeforeMount(() => {
  getAbnormalDetailData();
});
</script>

<style scoped lang="scss">
.split-line__HZ {
  height: 1px;
  background-color: var(--el-table-border-color);
  margin: 20px 0;
}

.table-section {
  margin-top: 20px;

  .table-title {
    display: flex;
    align-items: center;

    .decorator {
      width: 4px;
      height: 16px;
      margin-right: 10px;
      background: #3e61a9;
    }
  }

  .table-wrapper {
    margin-top: 10px;
  }

  .button-wrapper {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
}

.summary {
  // height: 0px;
  background-color: #f4f5f9;
  line-height: 50px;
  vertical-align: middle;
  text-align: right;
  padding: 5px 20px;
  color: #909399;

  .highlight {
    color: var(--el-color-danger);
    font-weight: bold;
  }
}

.line-content {
  display: flex;
  align-items: center;

  :deep(.el-button) {
    padding-top: 0;
    padding-bottom: 0;
    height: unset;
  }

  :deep(.el-input) {
    width: 400px;
    margin-right: 20px;
  }
}

.service-line {
  width: 100%;
  :deep(.line-content) {
    display: flex;
    :only-child {
      margin-right: 10px;
    }
  }
}

.abnnormalorder {
  :deep(.content .content-slot-bg) {
    overflow: hidden;
  }
}
</style>
